<template>
  <Header title="商品详情" />
  <div class="detail">
    <van-skeleton title :row="6" :loading="loading" style="width: 100%">
      <div class="detail_img">
        <img :src="detailData.shop_img ? detailData.shop_img : ''" alt="" />
      </div>
    </van-skeleton>
    <div class="detail_desc">
      <span> {{ detailData.shop_dec }}</span>
    </div>
    <div class="detail_deliver">免费包邮</div>
    <div class="detail_price">
      <span>￥{{ detailData.shop_price }}</span>
    </div>
    <div class="detail_goodsDetail">
      <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab title="商品介绍">
          <div class="product-content" data-v-bc8962f6="">
            <div v-html="detailData.shop_detail"></div>
          </div>
        </van-tab>
        <van-tab title="商品评价">
          <div class="comment-list">
            <div
              class="comment-item"
              v-for="(comment, index) in commentList"
              :key="index"
            >
              <div class="avatar">
                <van-image :src="comment.remark_img" fit="cover" />
              </div>
              <div class="info">
                <div class="username">{{ comment.user_id }}</div>
                <van-rate v-model="comment.rate" size="16" readonly show-score />
                <div class="content">{{ comment.remark }}</div>
                <div class="time">{{ comment.create_time }}</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-icon icon="cart-o" :badge="badge" text="购物车" @click="toCart" />
    <van-action-bar-button
      color="#be99ff"
      type="warning"
      @click="addCarts"
      text="加入购物车"
    />
    <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
  </van-action-bar>
</template>
<script setup>
import Header from "@/components/SHeader.vue";
import { onMounted, ref, computed } from "vue";
import { useRoute, onBeforeRouteLeave, onScrollBehavior } from "vue-router";
import { getDetail, remarkList } from "@/api/shop";
import { useStore } from "vuex";
import { addCart } from "@/api/cart";
import { toast } from "@/util/toast";
const route = useRoute();
const detailData = ref({});
//获取详情页数据
const getDetailData = async () => {
  const { data } = await getDetail(route.query.id);
  detailData.value = data.res[0];
};
//骨架屏是否加载
const loading = computed(() => {
  return detailData.value.shop_img ? false : true;
});
// badge
const store = useStore();
onMounted(() => {
  store.dispatch("updateCart");
  getDetailData();
});
const badge = computed(() => {
  return store.state.count;
});
// 添加购物车
const addCarts = async () => {
  const user_id = localStorage.getItem("token");
  const { data } = await addCart({ user_id, shop_id: route.query.id, shop_count: 1 });
  await store.dispatch("updateCart");
  toast("success", data.msg, 1000);
};
const commentList = ref([]);
// 加载评论
const getRemarkList = async () => {
  console.log(route.query.id);
  const { data } = await remarkList(route.query.id);
  commentList.value = data.res;
  console.log(data);
};
getRemarkList();
onBeforeRouteLeave((to, from, next) => {
  console.log(to, from);
  to.meta.keepAlive = true;
  next();
});
</script>
<style lang="scss">
.detail {
  padding: 10px;
  margin-bottom: 50px;

  &_desc,
  &_deliver,
  &_price {
    text-align: left;
    padding-top: 10px;
  }

  &_desc {
    font-weight: 600;
  }

  &_deliver {
    color: gray;
  }

  &_price {
    color: red;
    font-size: 16px;
  }

  &_price::first-letter {
    font-size: 12px;
  }
}

.detail_img {
  padding: 30px 0px 0px 0px;

  img {
    width: 100%;
    height: 100%;
  }
}

.comment-list {
  flex: 1;
  padding: 10px;
  overflow-y: scroll;
}

.comment-item {
  display: flex;
  margin-bottom: 20px;
}

.avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  // border-radius: 50%;
  overflow: hidden;
}

.info {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

.content {
  font-size: 14px;
  margin-top: 5px;
}

.time {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
.van-image {
  width: 50px;
  height: 50px;
}
</style>
